<template>
  <!--外访催收-修复信息-->
  <div>
    <!--按钮区域-->
    <template>
      <el-row>
        <el-col class="text-right">
          <el-button @click="addRepairApplyClick">修复申请</el-button>
          <el-button @click="addRepairInfoClick">修复信息</el-button>
        </el-col>
      </el-row>
    </template>
    <data-box ref="databox" :maxHeight="200" :server="servers.handle" :defaultParams="defaultParams" hiddenForm autoSearch :pagination="false">
      <!--数据列区域-->
      <template slot="column">
        <el-table-column type="index" label="序号" width="30">
        </el-table-column>
        <el-table-column prop="relation" label="关系" min-width="30">
          <template scope="scope">
            <span>{{scope.row.relation | typeCodeConvert('0034')}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" min-width="40">
        </el-table-column>
        <el-table-column prop="addressType" label="地址类型" min-width="60">
          <template scope="scope">
            <span>{{scope.row.addressType | typeCodeConvert('0024')}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="addressStatus" label="地址状态" min-width="60">
          <template scope="scope">
            <span>{{scope.row.addressStatus | typeCodeConvert('0025')}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" min-width="85">
          <template scope="scope">
            <span>{{scope.row.phone}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="phoneStatus" label="电话状态" min-width="60">
          <template scope="scope">
            <span>{{scope.row.phoneStatus | typeCodeConvert('0023')}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="socialType" label="社交账号类型" min-width="80">
          <template scope="scope">
            <span>{{scope.row.socialType | typeCodeConvert('0026')}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="socialNum" label="社交账号" min-width="80">
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" min-width="120">
        </el-table-column>
        <el-table-column prop="dataSource" label="数据来源" min-width="55">
        </el-table-column>
        <el-table-column prop="operator" label="操作人" min-width="70">
        </el-table-column>
        <el-table-column prop="detailAddress" label="详细地址" min-width="100">
          <template scope="scope">
            <el-button style="display:inline;white-space:inherit;line-height:1.5" @click="saveAddress(scope)" type="text">{{scope.row.countyId|cityConvert(true)}}{{scope.row.address}}<span v-if="scope.row.address" class="iconfont icon-dingwei" style="color:#0080ff;cursor: pointer;margin-left:5px;font-size:0.8em"></span> </el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="75">
          <template scope="scope">
            <el-button type="text" size="small" v-show="scope.row.fileIds&&scope.row.fileIds.length>0" @click="downloadRepairFileClick(scope)">下载修复文件</el-button>
          </template>
        </el-table-column>
      </template>
    </data-box>
    <!--弹出框-START-->
    <!--修复申请-->
    <el-dialog title="修复申请" v-model="addRepairApplys" size="tiny">
      <RepairApplication @close="addRepairApplys=false" @RecordRefresh="assistRecordRefresh"></RepairApplication>
    </el-dialog>
    <!--修复信息-->
    <el-dialog title="修复信息" v-model="repairInformation" @open="dialogOpen" @close="dialogClose">
      <CustomerRepairInfo @success="$refs['databox'].refresh()" @close="repairInformation=false" :editState="-1" :custId="$store.state.accManage.cust_id"></CustomerRepairInfo>
    </el-dialog>
    <!--百度地图弹出框-->
    <el-dialog v-model="addBaiduMap" title="位置信息" size="small" @open="baiduOpen" :close-on-click-modal="false" :close-on-press-escape="false">
      <bd-map ref="bdmap"></bd-map>
    </el-dialog>
  </div>
</template>
<script>
  import net from '@/util/net'
  import BdMap from '@/components/BdMap'
  import DataBox from '@/components/DataBox'
  import servers from '@/config/servers'
  import { downloadFile, getCityName } from '@/util/common'
  import CustomerRepairInfo from '@/views/repair-manage/CustomerRepairInfo'
  import RepairApplication from '@/views/acc-manage/RepairApplication' // 修复申请

  export default {
    name: 'visit-repair-info',
    data() {
      return {
        // 服务接口列表
        servers: {
          handle: servers.RepairManage.get_visit_repair_info
        },
        // 定义请求参数
        params: {
          custId: ''
        },
        defaultParams: {
          custId: this.$store.state.accManage.cust_id,
          reminderType: '70'
        },
        baiduMapInfo: {
          cityName: '',
          address: ''
        },
        addBaiduMap: false,
        addRepairApplys: false,
        addRepairInfos: false,
        repairInformation: false,
        dialog: {
          disabled: false
        },
        //  表单提交校验规则
        rules: {
          orapRemark: [
            { required: true, message: '请输入修复说明', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      dialogOpen() {
        document.documentElement.style.overflow = 'hidden'
      },
      dialogClose() {
        document.documentElement.style.overflow = 'auto'
      },
      /**
       * 下载修复文件
       */
      downloadRepairFileClick(scope) {
        console.log(scope.row)
        net.send({
          server: servers.RepairManage.get_repair_download_info,
          data: {
            fileIds: scope.row.fileIds
          }
        }).then((object) => {
          if (object && object.length > 0) {
            for (let i = 0; i < object.length; i++) {
              downloadFile(object[i].url, '修复文件')
            }
            this.$message({
              type: 'success',
              message: '下载成功'
            })
          }
        }, err => {
          this.$message({
            type: 'info',
            message: err.reason
          })
        })
      },
      /**
       * 刷新
       */
      refresh() {
        this.defaultParams = Object.assign({}, {
          custId: this.$store.state.accManage.cust_id,
          reminderType: '70'
        })
      },
      /**
       * 打开百度地图
       */
      baiduOpen() {
        this.$nextTick(() => {
          this.$refs['bdmap'].addressToLngLat(true)
        })
      },
      /**
       * 保存地址信息
       */
      saveAddress(scope) {
        console.log(scope.row)
        this.addBaiduMap = true
        let cityName = getCityName(scope.row.countyId, true).join('')
        let address = scope.row.address
        this.baiduMapInfo.cityName = cityName
        this.baiduMapInfo.address = address
        let obj = Object.assign({}, this.baiduMapInfo)
        this.$store.commit('updateBaiduMapInfo', obj)
      },
      /**
       * 修复申请
       */
      addRepairApplyClick() {
        this.addRepairApplys = true
      },
      /**
       * 修复信息
       */
      addRepairInfoClick() {
        this.repairInformation = true
      },
      /**
       * 刷新协催申请记录
       */
      assistRecordRefresh() {
        this.$emit('assistRecordRefresh')
      }
    },
    components: {
      DataBox,
      BdMap,
      CustomerRepairInfo,
      RepairApplication
    }
  }

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .el-table .info-row {
    background: #c9e5f5;
  }
  
  .el-table .positive-row {
    background: #e2f0e4;
  }

</style>
